<template>
    <div class="footer">
        <div class="container">
            <div class="top">
                <div class="left-nav">
                    <div class="nav-list">
                        <div class="nav-title">
                            <p>关于魁阁</p>
                        </div>
                    </div>
                    <div class="nav-list">
                        <div class="nav-title">
                            <p>帮助中心</p>
                        </div>
                    </div>
                    <div class="nav-list">
                        <div class="nav-title">
                            <p>在线客服</p>
                        </div>
                    </div>
                    <div class="nav-list">
                        <div class="nav-title">
                            <p>关注我们</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copy-right">
                <p>©2024 | 湖南信息职业技术学院Web项目组</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.footer {
    .container {
        .top {
            display: flex;
            align-items: center;
            justify-content: center;
            .left-nav {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                flex-basis: 50%;
                > .nav-list {
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    flex-direction: column;
                    .nav-title {
                        font-size: 20px;
                        color: #333;
                        margin-bottom: 20px;
                        font-weight: bold;
                    }
                    .nav-item {
                        font-size: 14px;
                        color: rgb(160, 168, 176);
                        margin: 7px 0;
                        transition: color 0.1s ease-in;
                        cursor: pointer;
                        &:hover {
                            color: $main-color;
                        }
                    }
                }
            }
            .right-follow {
                height: 284px;
                flex-basis: 25%;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                .title {
                    font-size: 24px;
                    margin-bottom: 10px;
                    font-weight: bold;
                }
                .qr-code-list {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    > .code-item {
                        margin-right: 30px;
                        .code {
                            padding: 2px;
                            border: 1px solid #333;
                        }
                        .title {
                            margin-top: 5px;
                            font-size: 14px;
                            color: #666;
                            text-align: center;
                        }
                    }
                }
            }
        }
        .link {
            margin-top: 50px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .title {
                font-size: 24px;
                font-weight: bold;
            }
            .link-list {
                margin-left: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                > .link-item {
                    font-size: 14px;
                    color: rgb(160, 168, 176);
                    margin: 0 10px;
                    @include Hover($main-color, color);
                }
            }
        }
        .copy-right {
            width: 70%;
            padding: 10px;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #eeeeee;
            margin: 0 auto;
        }
    }
}
</style>
